<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-城市移动</title>
    <style>
     select{
       width: 40px;
       height: 70px;
        display: inline;
      }
     div{
       display: inline-block;
     }
    </style>
    <script>
      window.onload = function () {
        // 获取下拉菜单选项
        var leftEle = document.getElementById("left");
        var rightEle = document.getElementById("right");
        // 给向右移动的按钮添加事件
        var goRightEle = document.getElementById("goRight");
        goRightEle.onclick = function () {
          // 获取左边被选中的城市
          let leftOption = leftEle.children;
          for (let i = 0; i < leftOption.length; i++) {
              let leftOptionElement = leftOption[i];
            if(leftOptionElement.selected){
              // 移动节点
              rightEle.appendChild(leftOptionElement);
              i--;
            }
          }
        }
        // 从右往左移 获取按钮对象
        let goLeftEle = document.getElementById("goLeft");
        goLeftEle.onclick = function () {
          var rightEleArr = rightEle.children;
          for (let i = 0; i < rightEleArr.length; i++) {
            let rightEleArrElement = rightEleArr[i];
            if(rightEleArrElement.selected){
              // 移动节点
              leftEle.appendChild(rightEleArrElement);
              i--;
            }
          }
        }

      }
    </script>
</head>
<body>
  <select name ="left" id="left" multiple>
    <option value="0">重庆</option>
    <option value="1">武汉</option>
    <option value="2">上海</option>
    <option value="3">成都</option>
    <option value="4">北京</option>
  </select>

  <div class ="btn">
    <input type="button" value=">>" id="goRight"><br>
    <input type="button" value="<<" id="goLeft">
  </div>

  <select name="right" id="right" multiple></select>
</body>
</html>